<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="css/element-ui/index.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>


<body>
    <div id="app">

        <h2>用户{{this.authentication}}近五次成绩分布图</h2>
        <div id="main" style="width: 100%;height: 300px">
        </div>
        <div id="main1" style="width: 100%;height: 300px">
        </div>

    </div>





</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script src="js/echarts.min.js"></script>

<!-- 引入组件库 -->
<!-- <script src="js/element-ui/index.js"></script> -->
<!-- <script src="js/vue.js"></script> -->

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                authentication: "",
                tableData: [],
                option: {
                    series: [{
                        type: 'pie',
                        data: [],
                    }],
                    roseType: 'area'
                },
                option1: {
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        data: [10, 22, 28, 43, 49],
                        type: 'line',
                        stack: 'x'
                    }]
                },
                myChart: "",
                myChart1: ""
            }
        },
        mounted() {
            this.getData()
                // 基于准备好的dom，初始化echarts实例
            this.myChart = echarts.init(document.getElementById('main'))
            this.myChart1 = echarts.init(document.getElementById('main1'))
            console.log(this.myChart)
        },
        created() {
            //获取token字符串
            var url = window.location.href
            var authentication = "authentication="
            idx = url.indexOf(authentication)
            if (idx != -1) {
                this.authentication = url.substring(idx + authentication.length)
            }
            console.log(this.authentication)

            // //远程
            // axios.get('https://qianicloud.cn/api/test/get_score', {
            //         params: {
            //             userName: this.authentication
            //         }
            //     })
            //     .then(res => {
            //         // console.log(res.data.data)
            //         // console.log(typeof(res.data.data))
            //         this.tableData = res.data.data
            //     })


        },
        methods: {
            async getData() {
                //本地
                await axios.get('https://qianicloud.cn/api/test/get_score', {
                        params: {
                            userName: this.authentication
                        }
                    })
                    .then(res => {
                        // console.log(res.data.data)
                        // console.log(typeof(res.data.data))
                        this.tableData = res.data.data
                        console.log(res.data)

                        // 使用刚指定的配置项和数据显示图表。
                        this.option.series[0].data.value = this.tableData.score
                        this.option.series[0].data.name = this.tableData.score
                        for (let i = 0; i < this.tableData.length; i++) {
                            var x = {
                                name: this.tableData[i].score,
                                value: this.tableData[i].score
                            }
                            console.log(this.tableData[i].score)
                                // this.option.series[0].data[i]['value'] = this.tableData[i].score
                                // this.option.series[0].data[i]['name'] = this.tableData[i].score
                            this.option.series[0].data[i] = x;
                            this.option1.series[0].data[i] = this.tableData[i].score
                        }


                        console.log(this.option)
                        this.myChart.setOption(this.option);
                        this.myChart1.setOption(this.option1);
                    })
            }
        }

    })
</script>

</html>